<template>
    <div class="list">
        <!-- 页面导航 -->
        <van-nav-bar title="备忘录列表" />

        <van-empty
            v-if="list.length === 0"
            description="你的备忘录空空如也，去创建一个吧~"
        />

        <!-- 列表 -->
        <van-row
            type="flex"
            justfiy="space-between"
            align="center"
            v-for="item in list"
            :key="item.id"
            @click="goDetail(item.id)"
        >
            <van-col span="16">
                <div class="van-ellipsis">
                    {{ item.task }}
                </div>
                <div class="van-ellipsis">
                    本金 {{ item.benjin }}， 佣金 {{ item.yongjin }}
                </div>
                <div class="van-ellipsis">
                    {{ item.create_time | dateFormat }}
                </div>
            </van-col>

            <van-col span="8">
                <van-button size="mini">本金</van-button>
                <van-button size="mini">佣金</van-button>
            </van-col>
        </van-row>
    </div>
</template>

<script>
export default {
    mounted() {
        this.getList();
    },
    data() {
        return {
            list: [],
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get('/memos');
            this.list = res.data;
            console.log(this.list);
        },
        goDetail(id) {
            this.$router.push(`/detail/${id}`);
        },
    },
};
</script>

<style lang="less" scoped>
.list {
    background: #eee;
    height: 100vh;
    .van-row {
        padding: 0 15px;
        background: #fff;
        margin-top: 10px;
    }

    .van-ellipsis {
        margin: 15px 0;
        line-height: 24px;
    }
}
</style>
